<template>
    <div class="container">
        <div class="scrollCon" @scroll="move" @wheel="loadMore" ref="scroll">
            <div class="loadBox flex jc-center ai-center" v-show="isLoad" :class="{'play': isLoad}">
                <i class="iconfont icon-loading play"></i>
            </div>
            <div class="content" :class="{'cantSelect': touchBar}">
                <slot></slot>
            </div>
        </div>
        <div class="scroll" :class="{'show': barShow}" @mouseenter="enterBar" @mouseleave="leaveBar">
            <div class="bar"
                 v-show="canScroll > 0"
                 :style="{
                     transform: `translateY(${barMove}px)`,
                     height: `${barHeight}px`
                 }"
                 @mousedown="mouseDown"
            ></div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            totalLength: Number,
            listLength: Number,
            alwaysBottom: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                scroll: null,

                ctnHeight: 0,
                scrollHeight: 0,

                barMove: 0,
                //草，怎么重名了
                scrollFlag: false,

                //滚动条显示
                barShow: false,
                showTimer: null,

                mouseEnter: false,

                touchBar: false,
                //鼠标按下时的pageY和scrollTop
                startY: 0,
                startTop: 0,

                moveFlag: false,

                //加载更多
                isLoad: false,
            }
        },
        computed: {
            canScroll() {
                return this.scrollHeight - this.ctnHeight;
            },
            barHeight() {
                return this.ctnHeight / this.scrollHeight * this.ctnHeight;
            }
        },
        methods: {
            //初始化滚动条组件状态
            init() {
                this.update();
                //滚动到底下
                this.scroll.scrollTop = this.scrollHeight - this.ctnHeight;
            },
            //获取盒子高度以及内部高度
            update(scrollDown) {
                this.ctnHeight = this.scroll.clientHeight;
                this.scrollHeight = this.scroll.scrollHeight;

                if (scrollDown) {
                    this.scroll.scrollTop = this.scrollHeight - this.ctnHeight;
                }
            },
            //滚动条移动
            move() {
                // if (this.scroll.scrollTop === 0 && )
                if (!this.scrollFlag) {
                    this.scrollFlag = true;

                    this.barMove = this.scroll.scrollTop / this.scrollHeight * this.ctnHeight;

                    //显示滚动条并定下定时器
                    if (!this.mouseEnter) {
                        this.barShow = true;
                        clearTimeout(this.showTimer);
                        this.showTimer = setTimeout(() => {
                            this.barShow = false;
                        }, 1000);
                    }

                    setTimeout(() => {
                        this.scrollFlag = false;
                    }, 15);
                }
            },

            //鼠标移入时
            enterBar() {
                clearTimeout(this.showTimer);
                this.mouseEnter = true;
                this.barShow = true;
            },
            leaveBar() {
                this.mouseEnter = false;
                if (!this.touchBar) {
                    clearTimeout(this.showTimer)
                    this.showTimer = setTimeout(() => {
                        this.barShow = false;
                    }, 1000);
                }
            },

            mouseDown(e) {
                if (this.canScroll > 0) {
                    this.touchBar = true;
                    this.startY = e.pageY;
                    this.startTop = this.scroll.scrollTop;
                }
            },
            mouseMove(e) {
                if (!this.moveFlag && this.touchBar) {
                    this.moveFlag = true;
                    this.scroll.scrollTop = this.startTop +
                        (e.pageY - this.startY) / this.ctnHeight * this.scrollHeight;

                    setTimeout(() => {
                        this.moveFlag = false;
                    }, 16)
                }
            },
            mouseUp() {
                this.touchBar = false;

                this.showTimer = setTimeout(() => {
                    this.barShow = false;
                }, 1000);
            },

            loadMore(e) {
                // console.log(this.listLength, this.totalLength)
                if (!this.isLoad && this.scroll.scrollTop === 0
                    && e.deltaY < 0 && this.listLength < this.totalLength) {
                    this.isLoad = true;
                    this.$emit('loadMore');
                }
            },

            resetLoadStatus() {
                this.isLoad = false;
                //回到原先位置
                this.$nextTick(() => {
                    this.scroll.scrollTop = this.scroll.scrollHeight - this.scrollHeight;
                    this.scrollHeight = this.scroll.scrollHeight;
                })
            }
        },
        mounted() {
            this.scroll = this.$refs.scroll;
            this.init();

            let that = this;
            window.addEventListener('mousemove', that.mouseMove);
            window.addEventListener('mouseup', that.mouseUp);
        }
    }
</script>

<style scoped lang="scss">
    .container {
        position: relative;
        overflow: hidden;

        .scrollCon {
            height: 100%;
            margin-right: -17px;
            overflow-x: hidden;
            overflow-y: scroll;

            .cantSelect {
                user-select: none;
            }

            .loadBox {
                width: 100%;
                height: 40px;

                @keyframes load {
                    from {transform: rotate(0)}
                    to {transform: rotate(360deg)}
                }

                &.play {
                    animation: load linear 1s infinite;
                }

                .iconfont {
                    font-size: 24px;
                }
            }
        }

        .scroll {
            position: absolute;
            right: 0;
            top: 0;
            width: 5px;
            height: 100%;
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.5s;

            &.show {
                opacity: 1;
            }

            .bar {
                position: absolute;
                width: 5px;
                height: 50px;
                background-color: rgb(82, 85, 91);
                border-radius: 20px;
                transition: background-color 1s;
                cursor: pointer;
            }
        }
    }
</style>